<template>
	<view>
		<!-- orderinvoic 订单开票 -->

		<!-- 导航 -->
		<view class="navigBox">
			<u-tabs :list="navlist" :current="navIndex" @change="ToggleNav" font-size="28" height="84"
				:active-color="activeColor" bar-width="66" gutter="20"></u-tabs>

		</view>

		<view class="screen_area FlexBetween">
			<view class="screen_left FlexAlign">

				<view class="slitem " v-for="(item, index) in slitlist"
					:class="{'isActive': pageobj.invoice_type == item.id}" @click="ToggleSlit(item)">
					{{item.title}}
				</view>
			</view>
			<view class="screen_right FlexAlign" @click="openSreenPup">
				<i class="iconfont icon-shaixuan"></i>
				筛选
			</view>

		</view>



		<view class="trip_orderlist">

			<view class="headup_btn FlexRow gradient_bg4" @click="heaupClick">
				抬头管理
			</view>

			<template v-if="pageobj.list.length">
				<view class="tripOrderItem invoicItem FlexBox" @click="ToggleCheck(item)"
					v-for="(item, index) in pageobj.list">
					<view class="checkarea FlexColumn" v-if="pageobj.invoice_type != 1">
						<view class="checkbox FlexRow" :class="{'ischeck': item.isCheck}">
							<i class="iconfont icon-duihao"></i>
						</view>
					</view>
					<view class="FlexItem">
						<oderitem :orderitem="item" :botshow="false" :stautshow="false"></oderitem>
					</view>


					<view class="invoicInfo" v-if="0">
						<view class="trip_head FlexBetween">
							<view class="trip_left FlexAlign">
								<view class="title">
									{{item.order_type_desc}}
								</view>
							</view>

							<view class="price FlexAlign">
								<view class="pval">
									{{item.order_amount || 0.00}}元
								</view>
							</view>
						</view>
						<!--  -->
						<view class="trip_time">
							下单时间：{{item.create_time}}
						</view>
						<!--  -->
						<view class="trip_address">
							<!-- 1-南站直达,2-机场直达,3-福祉车,4-校园车, -->
							<template v-if="item.order_type < 5">
								<view class="trip_location origin">
									{{item.start_addres}}
								</view>
								<view class="trip_location origin color_End">
									{{item.end_address}}
								</view>
							</template>
							<!-- 直通快线 -->
							<view class="" v-else-if="item.order_type == 5 && item.through_express_rs_snap">
								<travelroute :programme="3" :schedule="item.through_express_rs_snap.schedule"
									:remark="item.through_express_rs_snap.remark"></travelroute>

							</view>
							<!-- 8-广坲城游,  9-周边游 -->
							<template v-else-if="item.order_type > 7">
								<view class="infos_line" v-if="item.ctta_snap">
									套餐名称: {{item.ctta_snap.title || ''}}
								</view>
								<view class="infos_line">
									线路车型: {{item.ctta_snap.car_type || ''}}
								</view>
								<view class="infos_line">
									套餐价格: ￥{{item.order_amount || '0.00'}}
								</view>
							</template>
							<!-- 包车 -->
							<template v-else-if="item.order_type == 7 && item.chartered_bus_apply_snap">


								<view class="trip_address">
									<view class="trip_location origin">
										{{item.chartered_bus_apply_snap.pick_up_point}}
									</view>
									<view class="trip_location origin color_End">
										{{item.chartered_bus_apply_snap.drop_off_place}}
									</view>
								</view>






							</template>
						</view>

						<template v-if="item.order_type == 7 && item.chartered_bus_apply_snap">
							<view class="infos_line m-t-10" v-if="item.ctta_snap">
								包车车型: {{item.chartered_bus_apply_snap.car_type_desc}}
							</view>
							<view class="infos_line">
								用车开始时间: {{item.chartered_bus_apply_snap.use_start_time}}
							</view>
							<view class="infos_line">
								用车开始结束: {{item.chartered_bus_apply_snap.use_end_time}}
							</view>
							<view class="infos_line">
								联系人: {{item.chartered_bus_apply_snap.contact_name}}
							</view>
							<view class="infos_line">
								联系电话: {{item.chartered_bus_apply_snap.contact_phone}}
							</view>
						</template>
					</view>


				</view>

			</template>

			<template v-else>
				<!-- <nodata></nodata> -->
			</template>
		</view>



		<view class="bottom_mask"></view>

		<view class="orinvo_bottom" v-if="pageobj.invoice_type != 1">
			<view class="Summary FlexAlign">
				已选: <text>{{selectedNum}}</text> 个行程，共 <text>{{totalAmount}}</text> 元
			</view>
			<view class="operate_box FlexBetween">
				<view class="operate_left FlexAlign">
					<view class="operate_radio FlexAlign" @click="PageCheck = !PageCheck">
						<view class="checkbox FlexRow" :class="{'ischeck': PageCheck}">
							<i class="iconfont icon-duihao"></i>
						</view>
						全选
					</view>

				</view>
				<view class="operate_btn FlexRow gradient_bg4" @click="NextClick">
					下一步
				</view>

			</view>
		</view>


		<!-- 筛选 -->
		<oinvosreen ref="ref_sreen" :filterval="filterval" @retres="SreenChange"></oinvosreen>
		<!--  -->


	</view>
</template>

<script>
	// templ
	import travelroute from "@/bundle4/pages/through/components/travelroute.vue"
	// import nodata from "@/bundle4/components/content/nodata.vue"
	import oinvosreen from "./components/oinvosreen.vue"
	import oderitem from "@/bundle4/components/page/oderitem.vue"

	// api
	import {
		datalistMixins
	} from "@/mixins/datalist.js";
	import {
		api_invoice_config,
	} from "@/api/xtcapi/invoice.js"

	// import {
	// 	api_OrderList,
	// } from "@/api/xtcapi/order.js"
	import {
		External_soinvolist,
		External_navlist,
	} from "./js/order.js"

	// import {
	// 	Modalinter,
	// } from "@/api/xtcapi/vehicle.js"

	export default {
		mixins: [datalistMixins],
		components: {
			// nodata,
			oinvosreen,
			travelroute,
			oderitem,
		},
		data() {
			return {
				navlist: [],
				navIndex: 0,
				activeColor: '#003232',
				filterval: '',

				PageCheck: false,
				AllCheck: false,

				pageobj: {
					page_no: 1, // 	Integer	当前页码
					page_size: 10, // 	Integer	每页显示条数
					page_total: 0,
					list: [],
					initial: true,

					time_type: '', // 时间类型
					// 空：全部
					// week：本周
					// month：本月
					// year：本年
					// diy：自定义

					type: 'all', // 订单状态
					// all：全部
					// pay：待支付
					// confirm：待确认
					// trip：待出行
					// progress：进展中
					// finish：已完成
					// close：已取消


					invoice_type: 0,
					// 空：全部，0：可开发票，1：已开发票
					order_amount: '', // 金额范围
					order_type_shop: 0, // 订单类型
				},
				start_time: '', // 开始时间，time_type 为 diy 必填
				end_time: '', // 结束时间，time_type 为 diy 必填

				slitlist: [{
						title: '可开发票订单',
						id: 0,
					},
					{
						title: '已开发票订单',
						id: 1,
					},
				],

			}
		},
		onLoad(options) {

			if (options) {
				this.navIndex = options.nindex || 0
			}
			this.initialization()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.initialization()
		},
		computed: {
			selectedNum() {
				let list = this.pageobj.list.filter(v => v.isCheck)
				return list.length
			},
			totalAmount() {
				let num = 0
				for (let item of this.pageobj.list) {
					if (item.isCheck && item.order_amount) {
						num += item.order_amount * 1
					}
				}
				return num
			},
		},
		watch: {
			PageCheck(newVal) {
				for (let item of this.pageobj.list) {
					item.isCheck = newVal
				}
			},


		},
		onShow() {
			uni.setStorageSync('invoic_select_list', '')
		},
		methods: {
			ToggleSlit(item) {
				let {
					id
				} = item
				console.log(id, this.pageobj.invoice_type)
				if (id == this.pageobj.invoice_type) {
					this.pageobj.invoice_type = 'all'
				} else {
					this.pageobj.invoice_type = id
				}
				this.ResetRefresh()
			},
			ToggleCheck(item) {
				item.isCheck = !item.isCheck
			},
			// 页面初始化
			initialization() {

				this.getStConf()
			},
			// 获取页面配置信息
			getStConf() {
				api_invoice_config({}).then(res => {
					// 服务是否开启 
					// if (res.invoice_enabled == 0) {
					// 	Modalinter('该页面功能未开放，敬请期待！')
					// 	return
					// }

					this.filterval = JSON.stringify(External_soinvolist)
					let newObj = JSON.parse(JSON.stringify(External_navlist))
					newObj.unshift({
						name: '全部'
					})
					this.navlist = newObj
					// 请求列表数据
					this.ResetRefresh()
				})
			},
			ToggleNav(index) {
				this.navIndex = index
				this.pageobj.order_type_shop = index
				this.ResetRefresh()
			},
			getDatasList() {
				let {
					order_type_shop,
					page_no,
					page_size,
					invoice_type,
					order_amount,
				} = this.pageobj
				let time_type = ''
				if (this.start_time && this.end_time) {
					time_type = 'diy'
				}
				let data = {
					invoice_type: invoice_type == 'all' ? '' : invoice_type,
					order_type_shop,
					time_type,
					start_time: this.start_time,
					end_time: this.end_time,
					type: 'finish',
					page_no,
					page_size,
					order_amount,
					enterprie_status: 0,
				}
				// api_OrderList(data).then((res) => {
				//  	this.handleDatas(res)
				// })
			},
			// 处理列表数据
			handleDatas(resobj) {
				let {
					count,
					lists,
				} = resobj
				let {
					page_size,
					initial
				} = this.pageobj
				this.PageCheck = false
				for (let item of lists) {
					item.isCheck = false
					let {
						depart_station_snap,
						arrive_station_snap
					} = item
					item.start_addres = `${depart_station_snap.title || ''} ${depart_station_snap.short_location || ''}`
					item.end_address = `${arrive_station_snap.title || ''} ${arrive_station_snap.short_location || ''}`
					if (!initial) {
						this.pageobj.list.push(item)

					}
				}
				if (initial) { // 初次加载
					this.pageobj.page_total = Math.ceil(count / page_size)
					this.pageobj.list = lists
					this.pageobj.initial = false
				}

				uni.stopPullDownRefresh()
			},
			NextClick() {
				// 选择的列表
				let list = this.pageobj.list.filter(v => v.isCheck)
				if (!list.length) {
					this.$toast({
						title: '至少勾选一条数据'
					})
					return
				}

				let tsome = list.some(v => v.order_type > 7)
				if (tsome) {
					let tflag = list.every(v => v.order_type > 7)
					console.log('tflag', tflag)
					if (!tflag) {
						uni.showModal({
							title: '提示',
							content: `广佛域游、周边游不能与其他线路的订单一起开票`,
							showCancel: false,
						})
						return
					}
				}

				console.log('list', list)
				uni.setStorageSync('invoic_select_list', JSON.stringify(list))
				uni.navigateTo({
					url: '/bundle4/pages/invoice/oinvoicing'
				})

			},
			openSreenPup() {
				if (this.$refs.ref_sreen) {
					this.$refs.ref_sreen.fn_initial()
				}
			},
			SreenChange(res) {
				let {
					resArr
				} = res
				console.log('SreenChange', resArr)
				for (let item of resArr) {
					let {
						key,
						select_value
					} = item
					if (key == "OrderTime") {
						this.start_time = select_value[0]
						this.end_time = select_value[1]
					} else if (key == 'order_amount') {
						if (select_value[0] && select_value[1]) {
							this.pageobj.order_amount = `${select_value[0]}-${select_value[1]}`
						}
					} else if (key == "order_type_shop") {
						this.pageobj.order_type_shop = select_value
					}
				}
				this.ResetRefresh()

			},
			heaupClick() {
				uni.navigateTo({
					url: '/bundle4/pages/invoice/headup/headuplist'
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/bundle4/css/Flex.scss";
	@import "./css/dlist.scss";

	.headup_btn {
		width: 180rpx;
		height: 68rpx;
		border-radius: 8rpx;
		// background: linear-gradient(90deg, rgba(1, 92, 214, 1) 0%, rgba(88, 159, 252, 1) 100%);

		font-size: 28rpx;
		font-weight: 700;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		margin-bottom: 20rpx;
	}

	.bottom_mask {
		width: 100%;
		height: 220rpx;
	}

	.orinvo_bottom {
		width: 100%;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;

		.Summary {
			padding: 0 40rpx;
			width: 100%;
			height: 68rpx;

			border-bottom: solid 1px #F1F1F1;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);

			text {
				color: #03ADAD;
				display: inline-block;
				margin: 0 4rpx;
			}
		}

		.operate_box {
			height: 152rpx;
			width: 100%;
			padding: 26rpx 40rpx;

			.operate_left {
				.operate_radio {
					margin-right: 55rpx;

					&:last-of-type {
						margin-right: 0;
					}

					.checkbox {
						margin-right: 20rpx;
					}

					font-size: 28rpx;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);
				}
			}

			.operate_btn {
				width: 200rpx;
				height: 100rpx;
				border-radius: 12rpx;

				font-size: 32rpx;
				font-weight: 700;
				color: rgba(255, 255, 255, 1);
				text-align: center;

			}
		}
	}




	.navigBox {
		width: 100%;
		height: 84rpx;
		background: #fff;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 100;
		padding-left: 30rpx;
	}

	.screen_area {
		width: 100%;
		height: 88rpx;
		background: #fff;
		padding: 0 44rpx;

		.screen_left {
			.slitem {
				margin-right: 60rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(56, 56, 56, 1);

				&:last-of-type {
					margin-right: 0;
				}

				&.isActive {
					color: #003232;
				}
			}
		}

		.screen_right {

			font-size: 28rpx;
			font-weight: 400;
			color: rgba(56, 56, 56, 1);

			i {
				color: #B8B8B8;
				font-size: 30rpx;
				margin-right: 12rpx;
			}
		}
	}
</style>